const elColorPicker = {
    name: 'el-color-picker'
}

const elSwitch = {
    name: 'el-switch',
    bind: {
        activeText: '是',
        inactiveText: '否',
        inlinePrompt: true,
        activeValue: true,
        inactiveValue: false
    }
}

const elInput = {
    name: 'el-input',
    bind: {

    }
}

const elInputNumber = {
    name: 'el-input-number',
    bind: {

    }
}

const labelPosition = {
    name: 'el-radio-group',
    bind: {
        size: 'small'
    },
    children: [{
        name: 'el-radio-button',
        bind: {
            value: 'left',
        },
        content: 'left'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'right',
        },
        content: 'right'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'top',
        },
        content: 'top'
    }]
}

const widgetSize = {
    name: 'el-radio-group',
    bind: {
        size: 'small'
    },
    children: [{
        name: 'el-radio-button',
        bind: {
            value: 'large',
        },
        content: 'large'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'default',
        },
        content: 'default'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'small',
        },
        content: 'small'
    }]
}

const dateTypeSelect = {
    name: 'el-select',
    bind: {

    },
    children: [{
        name: 'el-option',
        bind: {
            value: 'date',
        },
        content: 'date'
    }, {
        name: 'el-option',
        bind: {
            value: 'week',
        },
        content: 'week'
    }, {
        name: 'el-option',
        bind: {
            value: 'year',
        },
        content: 'year'
    }, {
        name: 'el-option',
        bind: {
            value: 'month',
        },
        content: 'month'
    }, {
        name: 'el-option',
        bind: {
            value: 'daterange',
        },
        content: 'daterange'
    }, {
        name: 'el-option',
        bind: {
            value: 'monthrange',
        },
        content: 'monthrange'
    }, {
        name: 'el-option',
        bind: {
            value: 'yearrange',
        },
        content: 'yearrange'
    }]
}

const dateTimeTypeSelect = {
    name: 'el-select',
    bind: {

    },
    children: [{
        name: 'el-option',
        bind: {
            value: 'datetime',
        },
        content: 'datetime'
    }, {
        name: 'el-option',
        bind: {
            value: 'datetimerange',
        },
        content: 'datetimerange'
    }]
}

const cardShadowTypeSelect = {
    name: 'el-radio-group',
    bind: {
        size: 'small'
    },
    children: [{
        name: 'el-radio-button',
        bind: {
            value: 'always',
        },
        content: 'always'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'hover',
        },
        content: 'hover'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'never',
        },
        content: 'never'
    }]
}

const tabPositionSelect = {
    name: 'el-select',
    bind: {

    },
    children: [{
        name: 'el-option',
        bind: {
            value: 'left',
        },
        content: 'left'
    }, {
        name: 'el-option',
        bind: {
            value: 'right',
        },
        content: 'right'
    }, {
        name: 'el-option',
        bind: {
            value: 'top',
        },
        content: 'top'
    }, {
        name: 'el-option',
        bind: {
            value: 'bottom',
        },
        content: 'bottom'
    }]
}

const tabStyleSelect = {
    name: 'el-select',
    bind: {

    },
    children: [{
        name: 'el-option',
        bind: {
            value: '',
        },
        content: 'default'
    }, {
        name: 'el-option',
        bind: {
            value: 'card'
        },
        content: 'card'
    }, {
        name: 'el-option',
        bind: {
            value: 'border-card',
        },
        content: 'border-card'
    }]
}

const inputTypeSelect = {
    name: 'el-radio-group',
    bind: {
        size: 'small'
    },
    children: [{
        name: 'el-radio-button',
        bind: {
            value: '',
        },
        content: 'text'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'password',
        },
        content: 'password'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'textarea',
        },
        content: 'textarea'
    }]
}

const basicTypeSelect = {
    name: 'el-select',
    bind: {

    },
    children: [{
        name: 'el-option',
        bind: {
            value: '',
        },
        content: 'default'
    }, {
        name: 'el-option',
        bind: {
            value: 'primary'
        },
        content: 'primary'
    }, {
        name: 'el-option',
        bind: {
            value: 'success',
        },
        content: 'success'
    }, {
        name: 'el-option',
        bind: {
            value: 'info'
        },
        content: 'info'
    }, {
        name: 'el-option',
        bind: {
            value: 'warning',
        },
        content: 'warning'
    }, {
        name: 'el-option',
        bind: {
            value: 'danger',
        },
        content: 'danger'
    }]
}

const contentPosition = {
    name: 'el-radio-group',
    bind: {
        size: 'small'
    },
    children: [{
        name: 'el-radio-button',
        bind: {
            value: 'left',
        },
        content: 'left'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'center',
        },
        content: 'center'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'right',
        },
        content: 'right'
    }]
}

const effectTypeSelect = {
    name: 'el-radio-group',
    bind: {
        size: 'small'
    },
    children: [{
        name: 'el-radio-button',
        bind: {
            value: 'light',
        },
        content: 'light'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'dark',
        },
        content: 'dark'
    }]
}

const alertTypeSelect = {
    name: 'el-select',
    bind: {

    },
    children: [{
        name: 'el-option',
        bind: {
            value: 'success',
        },
        content: 'success'
    }, {
        name: 'el-option',
        bind: {
            value: 'info'
        },
        content: 'info'
    }, {
        name: 'el-option',
        bind: {
            value: 'warning',
        },
        content: 'warning'
    }, {
        name: 'el-option',
        bind: {
            value: 'error',
        },
        content: 'error'
    }]
}

const directionTypeSelect = {
    name: 'el-radio-group',
    bind: {
        size: 'small'
    },
    children: [{
        name: 'el-radio-button',
        bind: {
            value: 'horizontal',
        },
        content: 'horizontal'
    }, {
        name: 'el-radio-button',
        bind: {
            value: 'vertical',
        },
        content: 'vertical'
    }]
}

const justifyOptions = {
    name: 'el-select',
    bind: {

    },
    children: [
        {
            name: 'el-option',
            bind: { value: 'start' },
            content: 'start'
        },
        {
            name: 'el-option',
            bind: { value: 'center' },
            content: 'center'
        },
        {
            name: 'el-option',
            bind: { value: 'end' },
            content: 'end'
        },
        {
            name: 'el-option',
            bind: { value: 'space-between' },
            content: 'space-between'
        },
        {
            name: 'el-option',
            bind: { value: 'space-around' },
            content: 'space-around'
        }
    ]
};

const alignOptions = {
    name: 'el-select',
    bind: {

    },
    children: [
        {
            name: 'el-option',
            bind: { value: 'start' },
            content: 'start'
        },
        {
            name: 'el-option',
            bind: { value: 'center' },
            content: 'center'
        },
        {
            name: 'el-option',
            bind: { value: 'end' },
            content: 'end'
        }
    ]
};

const borderStyleSelect = {
    name: 'el-select',
    bind: {

    },
    children: [{
        name: 'el-option',
        bind: {
            value: 'solid',
        },
        content: 'solid'
    }, {
        name: 'el-option',
        bind: {
            value: 'dashed'
        },
        content: 'dashed'
    }, {
        name: 'el-option',
        bind: {
            value: 'dotted',
        },
        content: 'dotted'
    }, {
        name: 'el-option',
        bind: {
            value: 'none',
        },
        content: 'none'
    }]
}

export const attributesConfig = {
    title: {
        label: '标题',
        component: elInput
    },
    titleFontSize: {
        label: '标题文字大小',
        component: elInput
    },
    descFontSize: {
        label: '描述文字大小',
        component: elInput
    },
    textFontSize: {
        label: '文字大小',
        component: elInput
    },
    titleColor: {
        label: '标题文字颜色',
        component: elColorPicker
    },
    descColor: {
        label: '描述文字颜色',
        component: elColorPicker
    },
    textColor: {
        label: '文字颜色',
        component: elColorPicker
    },
    gutter: {
        label: '列间距',
        component: elInputNumber
    },
    span: {
        label: '栅格占据的列数',
        component: elInputNumber
    },
    hidden: {
        label: '是否隐藏',
        component: elSwitch
    },
    label: {
        label: '标签名称',
        component: elInput
    },
    placeholder: {
        label: '占位符',
        component: elInput
    },
    inputType: {
        label: '类型',
        component: inputTypeSelect
    },
    showPassword: {
        label: '显示预览图标',
        component: elSwitch
    },
    width: {
        label: '组件宽度',
        component: elInput
    },
    labelWidth: {
        label: '标签宽度',
        component: elInput
    },
    labelPosition: {
        label: '标签位置',
        component: labelPosition
    },
    showLabel: {
        label: '是否显示标签',
        component: elSwitch
    },
    disabled: {
        label: '是否禁用',
        component: elSwitch
    },
    isButton: {
        label: '展示为按钮',
        component: elSwitch
    },
    min: {
        label: '最小值',
        component: elInputNumber
    },
    max: {
        label: '最大值',
        component: elInputNumber
    },
    step: {
        label: '步长',
        component: elInputNumber
    },
    precision: {
        label: '精度',
        component: elInputNumber
    },
    activeText: {
        label: '打开时的文字',
        component: elInput
    },
    inactiveText: {
        label: '关闭时的文字',
        component: elInput
    },
    activeValue: {
        label: '打开时的绑定值',
        component: elInputNumber
    },
    inactiveValue: {
        label: '关闭时的绑定值',
        component: elInputNumber
    },
    size: {
        label: '组件大小',
        component: widgetSize
    },
    valueFormat: {
        label: '绑定值格式',
        component: elInput
    },
    format: {
        label: '展示格式',
        component: elInput
    },
    dateType: {
        label: '日期类型',
        component: dateTypeSelect
    },
    dateTimeType: {
        label: '类型',
        component: dateTimeTypeSelect
    },
    limit: {
        label: '数量限制',
        component: elInputNumber
    },
    accept: {
        label: '支持的文件类型',
        component: elInput
    },
    cardShadow: {
        label: '阴影类型',
        component: cardShadowTypeSelect
    },
    headerTitle: {
        label: '卡片标题',
        component: elInput
    },
    tabPosition: {
        label: '标签位置',
        component: tabPositionSelect
    },
    tabType: {
        label: '标签风格',
        component: tabStyleSelect
    },
    scoreTemplate: {
        label: '分数显示模板',
        component: elInput
    },
    showScore: {
        label: '是否显示分数',
        component: elSwitch
    },
    allowHalf: {
        label: '是否允许半星',
        component: elSwitch
    },
    basicType: {
        label: '预设类型',
        component: basicTypeSelect
    },
    alertType: {
        label: '类型',
        component: alertTypeSelect
    },
    plain: {
        label: '朴素按钮',
        component: elSwitch
    },
    round: {
        label: '圆角',
        component: elSwitch
    },
    circle: {
        label: '圆形按钮',
        component: elSwitch
    },
    circle: {
        label: '圆形按钮',
        component: elSwitch
    },
    text: {
        label: '文本内容',
        component: elInput
    },
    truncated: {
        label: '超长是否省略',
        component: elSwitch
    },
    lineClamp: {
        label: '最大行数',
        component: elInputNumber
    },
    closable: {
        label: '是否可关闭',
        component: elSwitch
    },
    center: {
        label: '是否居中',
        component: elSwitch
    },
    showIcon: {
        label: '是否显示图标',
        component: elSwitch
    },
    effect: {
        label: '主题',
        component: effectTypeSelect
    },
    description: {
        label: '描述内容',
        component: elInput
    },
    direction: {
        label: '分割线方向',
        component: directionTypeSelect
    },
    contentPosition: {
        label: '内容位置',
        component: contentPosition
    },
    borderStyle: {
        label: '分隔符样式',
        component: borderStyleSelect
    },
    gap: {
        label: '元素间距',
        component: elInput
    },
    justify: {
        label: '主轴对齐方式',
        component: justifyOptions
    },
    align: {
        label: '交叉轴对齐方式',
        component: alignOptions
    },
    wrap: {
        label: '允许换行',
        component: elSwitch
    },
    columnAlign: {
        label: '内容对齐方式',
        component: contentPosition
    },
    columnFixed: {
        label: '列是否固定',
        component: elSwitch
    },
    maxHeight: {
        label: '最大高度',
        component: elInput
    },
    border: {
        label: '是否显示边框',
        component: elSwitch
    },
    stripe: {
        label: '是否显示为斑马纹',
        component: elSwitch
    },
    fit: {
        label: '列自动撑满',
        component: elSwitch
    },
    margin: {
        label: '外边距',
        component: elInput
    },
    pading: {
        label: '内边距',
        component: elInput
    },
    checkStrictly: {
        label: '选择任意节点',
        component: elSwitch
    },
    multiple: {
        label: '多选',
        component: elSwitch
    },
    showCheckbox: {
        label: '显示选择框',
        component: elSwitch
    },
    required: {
        label: '内容必填',
        component: elSwitch
    }

}